<!--
 * @Author: quit
 * @Date: 2021-11-23 17:35:23
 * @LastEditTime: 2021-12-22 16:58:08
 * @Descripttion: 变量管理
-->
<template>
  <div id="AssetAttributes-container">
    <div class="app-container">
      <el-row>
        <!-- 右侧 -->
        <el-col :span="24" class="right">
          <el-card>
            <el-row>
              <el-col>
                <el-divider content-position="left">变量搜索</el-divider>
                <div class="search-box">
                  <el-form :inline="true" :model="searchFormRight" class="demo-form-inline">
                    <el-form-item :label="'设备类型'">
                      <el-cascader
                        v-model="checkedCascaderValue"
                        placeholder="请选择设备类型"
                        :props="drProps"
                        :options="drTypeData"
                        @focus="cascaderFocus"
                        @change="cascaderChange"
                      >
                        <template slot-scope="{ node, data }">
                          <span>{{ data.subsysname }}</span>
                          <span v-if="!node.isLeaf">({{ data.children.length }})</span>
                        </template>
                      </el-cascader>
                    </el-form-item>
                    <el-form-item :label="'设备名'">
                      <el-select v-model="searchFormRight.id" placeholder="请选择设备名" @change="selectChange">
                        <el-option v-for="item in drResData" :key="item.drid" :label="item.drname" :value="item.drid" />
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="'变量名'">
                      <el-input v-model="searchFormRight.name" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" icon="el-icon-zoom-in" @click="getRegPage">{{ $t('button.search') }}</el-button>
                      <el-button type="primary" icon="el-icon-refresh" @click="refresh">{{ '重置' }}</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
              <el-col>
                <div class="btns">
                  <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addItemBtn">{{ '添加变量信息' }}</el-button>
                  <!-- <el-button type="primary" size="mini" icon="el-icon-folder-add" @click="addItems">导入变量</el-button> -->
                  <!-- <el-button type="danger" size="mini" icon="el-icon-delete" @click="batchRemove">全部删除</el-button> -->
                </div>
              </el-col>
              <el-col>
                <el-table
                  ref="rightTable"
                  v-loading="rightTableLoading"
                  :max-height="righTableHeight"
                  :data="rightTableData"
                  :empty-text="$t('table.emptyText')"
                  style="width: 100%"
                >
                  <el-table-column prop="regid" label="ID" min-width="70" fixed="left" />
                  <el-table-column prop="regname" :label="'变量名'" min-width="180" fixed="left" />
                  <el-table-column :label="'设备名'" min-width="80">
                    <!-- Todo -->
                  </el-table-column>
                  <el-table-column prop="drid" :label="'设备ID'" min-width="80" />
                  <el-table-column prop="subsystemid" :label="'类型ID'" min-width="140">
                    <template slot-scope="scope">
                      {{
                        typeData &&
                          typeData.find(item => {
                            return item.value == scope.row.subsystemid
                          }).label
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column :label="'寄存器名'" min-width="80">
                    <!-- Todo -->
                  </el-table-column>
                  <el-table-column prop="appname" :label="'数值'" min-width="80">
                    <!-- Todo -->
                  </el-table-column>
                  <el-table-column prop="regunit" :label="'单位'" min-width="80" />
                  <el-table-column prop="reglevel" :label="'顺序'" min-width="80" />
                  <el-table-column prop="regisalarm" :label="'是否报警'" min-width="80" />
                  <el-table-column prop="regalarmlevel" :label="'报警级别'" min-width="80" />
                  <el-table-column prop="regalarmdescribe" :label="'报警描述'" min-width="80" />
                  <el-table-column prop="regalarmtype" :label="'报警类型'" min-width="80" />
                  <el-table-column prop="regalarmonoff" :label="'开关报警'" min-width="80" />
                  <el-table-column prop="regalarmdeviation" :label="'偏差报警值'" min-width="90" />
                  <el-table-column prop="regalarmdeviationinitvalue" :label="'偏差目标值'" min-width="90" />
                  <el-table-column prop="regalarmminimini" :label="'低低报警'" min-width="80" />
                  <el-table-column prop="regalarmmini" :label="'低报警'" min-width="80" />
                  <el-table-column prop="regalarmmax" :label="'高报警'" min-width="80" />
                  <el-table-column prop="regalarmmaxmax" :label="'高高报警'" min-width="80" />
                  <el-table-column prop="regalarmsleep" :label="'报警暂停时间'" min-width="110" />
                  <el-table-column prop="regalarmcss" :label="'报警样式'" min-width="80" />
                  <el-table-column prop="regalarmsort" :label="'报警分类'" min-width="80" />
                  <el-table-column header-align="center" align="center" fixed="right" :label="$t('table.operable')" min-width="160">
                    <template slot-scope="scope">
                      <el-button type="success" size="mini" @click="editHandle(scope.row)">{{ $t('button.edit') }}</el-button>
                      <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">{{ $t('button.delete') }}</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                  :current-page="rightPages.page"
                  :page-sizes="[1, 5, 10, 15]"
                  :page-size="rightPages.size"
                  layout="prev, pager, next, total, sizes, jumper"
                  :total="rightPages.total"
                  @size-change="rightSizeChange"
                  @current-change="rightCurrentChange"
                />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 添加\修改弹出层 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="75%" @close="addDialogClose">
      <div class="add-dialog-container">
        <el-form ref="addFrom" :model="addDialogForm" label-width="90px">
          <el-divider content-position="left" class="one">基本信息</el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="变量名" prop="appname">
                <el-input v-model="addDialogForm.regname" placeholder="请填写变量名" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="变量类型" prop="appname">
                <el-select v-model="addDialogForm.regdatatype" placeholder="请选择变量类型" clearable>
                  <el-option v-for="(item, index) in mitemdatatypeData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="读写类型" prop="appname">
                <el-select v-model="addDialogForm.regreadorwrite" placeholder="请选择读写类型" clearable>
                  <el-option v-for="(item, index) in mitemreadorwriteData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="变量模板" prop="appname">
                <el-select v-model="addDialogForm.subsysmodeid" placeholder="请选择读写类型" clearable>
                  <el-option v-for="(item, index) in subsysmodeidData" :key="index" :label="item.mitemname" :value="item.subsysmodeid" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="变量排序" prop="appname">
                <el-input v-model="addDialogForm.reglevel" placeholder="请填写变量值" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="寄存器名" prop="appname">
                <el-select v-model="addDialogForm.regdassname" placeholder="请选择变量阈值" clearable>
                  <el-option v-for="(item, index) in thresholdidData" :key="index" :label="item.thresholdname" :value="item.thresholdid" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="变量值" prop="appname">
                <el-input v-model="addDialogForm.reginitvalue" placeholder="请填写单位名称" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="变量阈值" prop="appname">
                <el-select v-model="addDialogForm.regshowthresholdid" placeholder="请选择变量阈值" clearable>
                  <el-option v-for="(item, index) in regshowthresholdidData" :key="index" :label="item.thresholdname" :value="item.thresholdid" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="单位" prop="appname">
                <el-input v-model="addDialogForm.regunit" placeholder="请填写采集时间" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计算公式" prop="appname">
                <el-input v-model="addDialogForm.regmaths" placeholder="请填写采集时间" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采集时间" prop="appname">
                <el-input v-model="addDialogForm.regsavertime" placeholder="请填写采集时间" autocomplete="off">
                  <template slot="append">单位 : 毫秒</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="是否历史" prop="appname">
                <el-select v-model="addDialogForm.regishistory" placeholder="请选择历史模式" clearable>
                  <el-option v-for="(item, index) in mitemishistoryData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否能耗" prop="appname">
                <el-select v-model="addDialogForm.regisenergy" placeholder="请选择能耗模式" clearable>
                  <el-option v-for="(item, index) in mitemisenergyData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否报警" prop="appname">
                <el-select v-model="addDialogForm.regisalarm" placeholder="请选择报警模式" clearable>
                  <el-option v-for="(item, index) in mitemisalarmData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left" class="two">报警信息</el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="报警级别" prop="appname">
                <el-select v-model="addDialogForm.regalarmlevel" placeholder="请选择报警级别" clearable>
                  <el-option v-for="(item, index) in subsysalarmlevelData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报警分类" prop="appname">
                <el-select v-model="addDialogForm.regalarmsort" placeholder="请选择报警分类" clearable>
                  <el-option v-for="(item, index) in subsysalarmsortData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报警说明" prop="appname">
                <el-input v-model="addDialogForm.regalarmdescribe" placeholder="请填写报警说明" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="延时报警" prop="appname">
                <el-input v-model="addDialogForm.regalarmsleep" placeholder="请填写延时时间" autocomplete="off">
                  <template slot="append">单位 : 毫秒</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item class="alone" label="报警类型" prop="appname">
                <el-select v-model="addDialogForm.regalarmtype" placeholder="请选择报警类型" clearable>
                  <el-option v-for="(item, index) in subsysalarmtypeData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item class="alone" label="开关量报警" prop="appname">
                <el-select v-model="addDialogForm.regalarmonoff" placeholder="请选择开关量报警" clearable>
                  <el-option v-for="(item, index) in subsysalarmonoffData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="偏移报警" prop="appname">
                <el-input v-model="addDialogForm.regalarmdeviation" placeholder="请填写偏移报警" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="偏移值" prop="appname">
                <el-input v-model="addDialogForm.regalarmdeviationinitvalue" placeholder="请填写偏移值" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="低低限" prop="appname">
                <el-input v-model="addDialogForm.regalarmminimini" placeholder="请填写低低限" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="低限" prop="appname">
                <el-input v-model="addDialogForm.regalarmmini" placeholder="请填写低限" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="高限" prop="appname">
                <el-input v-model="addDialogForm.regalarmmax" placeholder="请填写高限" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="高高限" prop="appname">
                <el-input v-model="addDialogForm.regalarmmaxmax" placeholder="请填写高高限" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item class="alone" label="报警样式" prop="appname">
                <el-input v-model="addDialogForm.regalarmcss" placeholder="请填写报警样式" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="addDialogState === 0" type="primary" @click="sendAddItem">确 定</el-button>
        <el-button v-if="addDialogState === 1" type="primary" @click="sendEditItem">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import $ from 'jquery'
import { getData } from '@/utils/auth'
import { getSubSysInfo, getSubSysName, getThresholdList } from '@/api/BmRequest'
import { getRegPage, getByIdList, getSysModeList, addRegItem, edotRegItme } from '@/api/BotRequest'

export default {
  components: {},
  data() {
    return {
      botData: {},
      typeData: [],
      drTypeData: [],
      checkedCascaderValue: null,
      drResData: [],
      drProps: { label: 'subsysname', value: 'subsystemid', expandTrigger: 'hover', checkStrictly: false },
      searchFormRight: { name: null, id: null, subsystemid: null },
      rightTableLoading: false,
      righTableHeight: null,
      rightTableData: [],
      rightPages: { page: 1, size: 15, total: 0 },
      dialogTitle: null,
      addDialogState: null,
      dialogVisible: false,
      addDialogForm: {
        regid: null,
        appid: null,
        drid: null,
        subsystemid: null,
        regname: null,
        regdatatype: null,
        regreadorwrite: null,
        subsysmodeid: null,
        regnum: null,
        regnumdescribe: null,
        reglevel: null,
        reginitvalue: null,
        regshowthresholdid: null,
        regdassname: null,
        regsavertime: null,
        regunit: null,
        regishistory: null,
        regisenergy: null,
        regisalarm: null,
        regmaths: null,
        regalarmlevel: null,
        regalarmdescribe: null,
        regalarmtype: null,
        regalarmonoff: null,
        regalarmdeviation: null,
        regalarmdeviationinitvalue: null,
        regalarmminimini: null,
        regalarmmini: null,
        regalarmmax: null,
        regalarmmaxmax: null,
        regalarmsleep: null,
        regalarmcss: null,
        regalarmsort: null,
        regalarmstate: null,
        regalarmingcode: null
      },
      mitemdatatypeData: [
        { label: '离散型', value: 0 },
        { label: '长整型', value: 1 },
        { label: '浮点型', value: 2 },
        { label: '字符串', value: 3 }
      ],
      mitemreadorwriteData: [
        { label: '读类型', value: 0 },
        { label: '读写类型', value: 1 }
      ],
      subsysmodeidData: [],
      thresholdidData: [],
      regshowthresholdidData: [],
      mitemishistoryData: [
        { label: '无历史存储', value: 0 },
        { label: '历史存储', value: 1 }
      ],
      mitemisenergyData: [
        { label: '不参与能耗', value: 0 },
        { label: '参与能耗', value: 1 }
      ],
      mitemisalarmData: [
        { label: '不报警', value: 0 },
        { label: '报警', value: 1 }
      ],
      subsysalarmlevelData: [
        { label: '高', value: 0 },
        { label: '中', value: 1 },
        { label: '低', value: 2 }
      ],
      subsysalarmsortData: [
        { label: '报警', value: 0 },
        { label: '故障', value: 1 }
      ],
      subsysalarmtypeData: [
        { label: '开关报警', value: 0 },
        { label: '偏移报警', value: 1 },
        { label: '范围报警', value: 2 }
      ],
      subsysalarmonoffData: [
        { label: '未选择', value: -1 },
        { label: '关报警', value: 0 },
        { label: '开报警', value: 1 },
        { label: '变位报警', value: 2 }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  created() {
    this.botData = getData('BotData')
    this.getSubSysName()
    this.getSubSysInfo()
    this.getThresholdList()
    this.getRegPage()
  }, // 生命周期 - 创建完成（可以访问当前this实例）
  mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {
    // 类型数据
    async getSubSysName() {
      const { data } = await getSubSysName()
      this.typeData = data
    },
    async getSubSysInfo() {
      const { data } = await getSubSysInfo()
      this.drTypeData = data
    },
    async getThresholdList() {
      const { data } = await getThresholdList()
      this.regshowthresholdidData = data
      this.regshowthresholdidData.unshift({ thresholdid: 0, thresholdname: '未选择', thresholddescribe: '0' })
    },
    // 级联框选择事件
    cascaderFocus() {
      this.checkedCascaderValue = null
      this.drResData = []
      this.searchFormRight = { name: null, id: null, subsystemid: null }
    },
    async cascaderChange(val) {
      console.log(val)
      let checked = val[val.length - 1]
      this.searchFormRight.subsystemid = checked
      const { data } = await getSysModeList({ appid: this.botData.id, subsystemid: checked })
      this.subsysmodeidData = data
      this.getByIdList(checked)
    },
    // 获取设备数据
    async getByIdList(id) {
      const { data } = await getByIdList({ appid: this.botData.id, subsystemid: id })
      this.drResData = data
    },
    // 设备选择事件
    selectChange(val) {
      this.getRegPage()
    },

    // 重置操作
    refresh() {
      this.checkedCascaderValue = null
      this.drResData = []
      this.searchFormRight = { name: null, id: null, subsystemid: null }
      this.rightPages = { page: 1, size: 15, total: 0 }
      this.getRegPage()
    },

    // 右侧表格数据获取
    async getRegPage() {
      const obj = {
        regmanager: {
          appid: this.botData.id,
          drid: this.searchFormRight.id,
          subsystemid: this.searchFormRight.subsystemid,
          regname: this.searchFormRight.name
        },
        pages: { page: this.rightPages.page, size: this.rightPages.size }
      }
      this.rightTableLoading = true
      try {
        const { data } = await getRegPage(obj)
        this.rightTableData = data.records
        this.rightPages.page = data.current
        this.rightPages.size = data.size
        this.rightPages.total = data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.rightTableLoading = false
      }
    },

    /* 分页操作 */
    rightSizeChange(newSize) {
      this.rightPages.size = newSize
      this.getRegPage()
    },
    rightCurrentChange(newPage) {
      this.rightPages.page = newPage
      this.getRegPage()
    },

    // 右侧表格添加按钮
    addItemBtn() {
      if (this.searchFormRight.id) {
        this.addDialogForm.appid = this.botData.id
        this.addDialogForm.drid = this.searchFormRight.id
        this.addDialogForm.subsystemid = this.searchFormRight.subsystemid
        this.dialogTitle = '添加变量信息'
        this.addDialogState = 0
        this.dialogVisible = true
      } else {
        this.$message.warning('请先选着需要添加变量的设备项!')
      }
    },

    /* 右侧表格操作 */
    async editHandle(val) {
      console.log(val)
      const { data } = await getSysModeList({ appid: this.botData.id, subsystemid: val.subsystemid })
      this.subsysmodeidData = data
      this.addDialogForm = { ...val }
      this.dialogTitle = '编辑变量信息'
      this.addDialogState = 1
      this.dialogVisible = true
    },
    deleteHandle() {},

    /* 弹出层事件 */
    addDialogClose() {
      this.dialogTitle = null
      this.addDialogState = null
      this.addDialogForm = {
        regid: null,
        appid: null,
        drid: null,
        subsystemid: null,
        regname: null,
        regdatatype: null,
        regreadorwrite: null,
        subsysmodeid: null,
        regnum: null,
        regnumdescribe: null,
        reglevel: null,
        reginitvalue: null,
        regshowthresholdid: null,
        regdassname: null,
        regsavertime: null,
        regunit: null,
        regishistory: null,
        regisenergy: null,
        regisalarm: null,
        regmaths: null,
        regalarmlevel: null,
        regalarmdescribe: null,
        regalarmtype: null,
        regalarmonoff: null,
        regalarmdeviation: null,
        regalarmdeviationinitvalue: null,
        regalarmminimini: null,
        regalarmmini: null,
        regalarmmax: null,
        regalarmmaxmax: null,
        regalarmsleep: null,
        regalarmcss: null,
        regalarmsort: null,
        regalarmstate: null,
        regalarmingcode: null
      }
    },
    async sendAddItem() {
      try {
        const { message } = await addRegItem(this.addDialogForm)
        this.$message.success(message)
      } catch (error) {
        console.log(error)
      } finally {
        this.getRegPage()
        this.dialogVisible = false
      }
    },
    async sendEditItem() {
      try {
        const { message } = await edotRegItme(this.addDialogForm)
        this.$message.success(message)
      } catch (error) {
        console.log(error)
      } finally {
        this.getRegPage()
        this.dialogVisible = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 15px 20px;
}
::v-deep .el-divider {
  margin: 14px 0 !important;
}

#AssetAttributes-container {
  .app-container {
    .search-box {
      border: 1px solid #dcdfe6;
      border-top: none;
      padding: 34px 10px 10px 10px;
      margin-top: -14px;
      .el-cascader {
        width: 280px;
      }
    }
    .btns {
      margin: 10px 0;
    }
    .left {
      .el-pagination {
        white-space: pre-wrap;
      }
      ::v-deep .el-pagination__total {
        margin-left: 15px;
      }
    }
  }
  .add-dialog-container {
    min-width: 980px;
    .el-input,
    .el-select {
      width: calc(100% - 10px);
    }
    .el-row {
      margin: 5px 0;
    }
    .alone {
      position: relative;
      width: 25%;
      .U {
        width: 80px;
        font-size: 16px;
        margin-left: 10px;
        position: absolute;
        top: 0;
      }
    }
    .one {
      .el-divider__text {
        padding: 2px 20px;
        background-color: #1a73e8;
        color: #f9f9f9;
      }
    }
    .two {
      .el-divider__text {
        padding: 2px 20px;
        background-color: #c09553;
        color: #f9f9f9;
      }
    }
  }
}
</style>
